<template>
	<view>
		<view class="my-toast flex ac jc" v-if="isShow">
			<view class="content">
				<view class="text">
					{{title}}
				</view>	
			</view>
		</view>

	</view>
</template>

<script>
export default {
	components: {},
	props: {
	},
	data() {
		return {
			title:"",// toast内容
			duration:2000,// toast 时间
			isShow:false
		};
	},
	computed: {
		// goodsDetailStateInfo(){
		//   return this.$globalData.state.goodsDetailInfo;
		// },
	},
	mounted() {},
	methods: {
		showToast(title,duration){
			this.title = title
			let mDuration = duration || this.duration
			this.isShow = true
			setTimeout(()=>{
				this.isShow = false
			},mDuration)
		},
		moveHandle() {}
	}
};
</script>

<style lang="scss" scoped>
.my-toast{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: block;
	box-sizing: border-box;
	pointer-events: none;   
	.content{
		position: fixed;
		z-index: 100000;
		// width: 8em;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		background: rgba(17,17,17,.7);
		text-align: center;
		border-radius: 5px;
		color: #fff;   
		 .text{
			 display: inline-block;
			 vertical-align: middle;
			 color: #fff;
			 // background-color: rgba(17,17,17,.7);
			 padding: 10px 20px;
			 border-radius: 5px;
			 font-size: 13px;
			 text-align: center;
			 max-width: 100%;
			 word-break: break-all;
			 white-space: normal;   
		 }
	}
}
</style>
